<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门</title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "./threejs/build/three.module.js",
          "three/addons/": "./threejs/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

      // 场景
      const scene = new THREE.Scene(); // 创建场景
      const geometry = new THREE.BoxGeometry(5, 5, 5);
      const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //材质
      for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
          for (let k = 0; k < 10; k++) {
            const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            mesh.position.set(i * 20, k * 20, j * 20);
            scene.add(mesh); //网格模型添加到场景中
          }
        }
      }

      // AxesHelper
      const axesHelper = new THREE.AxesHelper(150);
      scene.add(axesHelper);

      // 相机
      const camera = new THREE.PerspectiveCamera(); //相机
      camera.position.set(500, 500, 500); //相机位置
      camera.lookAt(0, 50, 0); //相机观察位置

      // 渲染器
      const renderer = new THREE.WebGLRenderer(); // 创建渲染器

      renderer.setSize(window.innerWidth, window.innerHeight); //渲染区域
      renderer.render(scene, camera); //执行渲染
      document.body.appendChild(renderer.domElement);

      // 设置相机控件轨道控制器OrbitControls
      const controls = new OrbitControls(camera, renderer.domElement);
      // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
      controls.addEventListener("change", function () {
        renderer.render(scene, camera); //执行渲染操作
        console.log(camera.position);
      }); //监听鼠标、键盘事件
    </script>
  </body>
</html>
